<template>
	<div class="conbox" id="person">
		<view class="uni-padding-wrap uni-common-mt">
			<form>
				<view class="uni-form-item uni-column line_right">
					<!--text class="title">{{userInfo.role_id==1||userInfo.role_id==2?'店铺logo':'头像'}}</text-->
					<text class="title">头像</text>
					<div class="uploduser">
						<uploader
							:num="maxCount"
							:imgList="imgListf"
							imgMode="center"
							:size="150" class='uplodaccount' ref="uplod"/>
					</div>
				</view>
				<view class="uni-form-item uni-column">
					<!--text class="title">{{userInfo.role_id==1||userInfo.role_id==2?'企业名称':'姓名'}}</text-->
					<text class="title">昵称</text>
					<input class="uni-input"  v-model="nick_name" :placeholder="userInfo.role_id==1||userInfo.role_id==2?'请输入企业名称':'请输入名字'"  @click="changename()" v-if="detail.vip_level== 0 || userInfo.role_id == 2"/>
					<input class="uni-input" v-model="nick_name" :placeholder="userInfo.vip_level==1||userInfo.role_id==2?'请输入企业名称':'请输入名字'" disabled  v-else />
				</view>
				<view class="uni-form-item uni-column">
					<text class="title">服务经验/年</text>
					<input class="uni-input"  v-model="working_years" type="number" placeholder="请输入服务经验" maxlength="3" @blur="blursave('blur')"/>
				</view>
				<view class="uni-form-item uni-column" v-if="userInfo.role_id==1||userInfo.role_id==2">
					<text class="title">店铺名称</text>
					<input class="uni-input"  v-model="nick_name_short"  placeholder="请输入店铺名称" maxlength="6" @blur="blursave('blur')"/>
				</view>
				<view class="uni-form-item uni-column line_right" @click="skipstyle('style')" v-if="userInfo.role_id !== 2">
					<text class="title">擅长风格</text>
					<span class="labtext exbise">{{stylelist}}</span>
				</view>
<!-- 				<view class="uni-form-item uni-column line_right"  @click="skipstyle('especail')" v-if="userInfo.role_id==1||userInfo.role_id==2">
					<text class="title">特色服务</text>
					<span class="labtext exbise">{{shop_tag_info}}</span>
				</view> -->
				<!--view class="uni-form-item uni-column line_right"  @click="skipstyle('range')" v-if="userInfo.role_id==1||userInfo.role_id==2">
					<text class="title">经营范围</text>
					<span class="labtext exbise">{{business_scope_type}}</span>
				</view-->
				<!-- <view class="uni-form-item uni-column line_right" @click="editaddres"> -->
				<view class="uni-form-item uni-column line_right" v-if='detail.vip_level==0 || userInfo.role_id == 2' @click="editaddres">
					<text class="title">地区</text>
					<span class="labtext exbise">{{address}}</span>
				</view>
				<view class="uni-form-item uni-column line_right" v-else>
					<text class="title">地区</text>
					<span class="labtext exbise">{{address}}</span>
				</view>
				<view class="uni-form-item uni-column" v-if="userInfo.role_id==1||userInfo.role_id==2">
					<text class="title">体验地址</text>
					<view class="sellernote comsell" v-if="showtextearea">
						<textarea placeholder-style="line-height:60px;" v-model="profile_desc" placeholder="请输入体验店地址" @blur="blursave('blur')"/>
					</view>
					<view class="sellernote comsell spandesc" v-if="!showtextearea">
						<span class="comdesc">{{profile_desc}}</span>
					</view>
				</view>
				<view class="uni-form-item uni-column">
					<text class="title">详细地址</text>
					<input class="uni-input"  v-model="areadec"  placeholder="详细地址需填写到街道地址,如X街道X号" @blur="blursave('blur')" :disabled="detail.vip_level==0 || userInfo.role_id == 2 ? false : true " />
				</view>
<!-- 				<view class="uni-form-item uni-column line_right" @click="choosetime" v-if="userInfo.role_id==1||userInfo.role_id==2">
					<text class="title">营业时间</text>
					<span class="labtext exbise">{{business_hours}}</span>
				</view> -->
				<view class="uni-form-item uni-column">
					<text class="title">联系方式</text>
					<input class="uni-input" maxlength="11" v-model="contact_phone" type="number" placeholder="请输入手机号码"  @blur="blursave('blur', 'mobile')"/>
				</view>
			<!-- 	<view v-if="userInfo.role_id==1||userInfo.role_id==2">
					<div class="newlintab" >扩展资料</div>
					<view class="uni-form-item uni-column line_right" @click="jumpcompany(0,'center')" >
						<text class="title">企业历程</text>
						<span class="labtext exbise">{{course}}</span>
					</view>
					<view class="uni-form-item uni-column line_right" @click="jumpcompany(2,'center')">
						<text class="title">企业动态</text>
						<span class="labtext exbise">{{news}}</span>
					</view>
					<view class="uni-form-item uni-column line_right" @click="jumpcompany(4,'center')">
						<text class="title">企业招聘</text>
						<span class="labtext exbise">{{job}}</span>
					</view>
					<view class="uni-form-item uni-column">
						<text class="title">团队介绍</text>
						<input class="uni-input"  v-model="team_desc"  placeholder="请输入团队介绍" @blur="blursave('blur')"/>
					</view>
				</view> -->
				<view class="uni-form-item uni-column">
					<text class="title">微信号</text>
					<input class="uni-input"  v-model="wechat_number"  placeholder="请输入微信号" @blur="blursave('blur')"/>
				</view>
				<view class="uni-form-item uni-column line_right">
					<text class="title">微信二维码</text>
					<div class="uploduser">
						<uploader
							:num="maxCount"
							:imgList="imgList"
							imgMode="center"
							:size="150" class='uplodaccount' ref="uplods"/>
					</div>
				</view>
				<!-- <view v-if="userInfo.role_id==1||userInfo.role_id==2">
					<view class="uni-form-item uni-column line_right" @click="jumpcompany(3,'center')">
						<text class="title">合作品牌</text>
						<div class="right_img">
							<img :src="brand_img" alt="">
							<div class="img_btom">{{brand.length}}张</div>
						</div>
					</view>
					<view class="uni-form-item uni-column line_right" @click="jumpcompany(1,'center')">
						<text class="title">获奖证书</text>·
						<div class="right_img">
							<img :src="certificate_img" alt="">
							<div class="img_btom">{{certificate.length}}张</div>
						</div>
					</view>
				</view> -->
				<view class="uni-list">
					<view class="uni-list-cell uni-list-cell-pd">
						<view class="uni-list-cell-db">是否显示微信手机号</view>
						<switch :checked="checked" @change="changeswitch" color="#FFD11A"/>
					</view>
				</view>
				<!-- <view class="uni-form-item uni-column unimotto" v-if="userInfo.role_id > 2">
					<text class="title">设计格言</text>
					<view class="sellernote">
						<!--<textarea placeholder-style="line-height:60px;" v-model="motto" placeholder="请输入设计格言" @blur="blursave('blur')"/>
						<appTextarea placeholder="请输入设计格言" v-model="motto" @blur="blursave('blur')"/>
					</view>
				</view> -->
			</form>
		</view>
		<!--footer class="pub_fotter" v-if="userInfo.role_id==1||userInfo.role_id==2">
			<div class="fbtn_left" @click="jumpintroduce">企业介绍预览</div>
			<div class="fbtn_right" @click="saveperson('save')">保存</div>
		</footer>
		<footer class="pub_fotter" v-else>
			<div  @click="saveperson('save')">保存</div>
		</footer-->
		<footer class="pub_fotter">
			<div  @click="saveperson('save')">保存</div>
		</footer>
		<mpvue-city-picker themeColor="#FFD11A" ref="mpvueCityPicker" :pickerValueDefault="defaultArea"
						   @onConfirm="onConfirm"></mpvue-city-picker>
		<EditAlert ref="editAlert"></EditAlert>
		<uniPopup maxHeight="100vh" width="100%" ref="rename"  class="renamemask" @touchmove.stop.prevent="moveHandle" Top="30%" :maskClick="false">
			<div class="maskcontent">
				<div class="top">
					<p>{{userInfo.role_id==1||userInfo.role_id==2?'更改企业名称':'更改名字'}}</p>
					<input type="text" :placeholder="userInfo.role_id==1||userInfo.role_id==2?'请输入企业名称':'请输入名字'" v-model="renick_name" cursor-spacing="100">
				</div>
				<div class="button">
					<div class="btn" @click="cancelname()">取消</div>
					<div class="btn" @click="confirmname()">确定</div>
				</div>
			</div>
		</uniPopup>
	</div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import uploader from '@/components/App_uploader'
import { getBasicUser, getUser } from '@/utils/auth.js'
import { getusercompany } from '@/api/companyIntroduce'
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import appTextarea from '@/components/app-textarea'
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker'
import EditAlert from '@/pages/components/editAlert'
import { mobile as mobileReg } from '@/utils/tools/validate'
import { editpersondata, getpersondata, relamename } from '@/api/persondata'
export default {
	name: 'index',
	components: {
		uploader,
		EditAlert,
		mpvueCityPicker,
		uniPopup,
		appTextarea
	},
	data() {
		return {
			imgListf: [],
			imgList: [],
			maxCount: 1,
			reaname: '装修公司',
			business_scope_type: '',
			checked: true,
			nick_name: '', // 用户信息
			nick_name_short: '',
			working_years: '',
			team_desc: '',
			address: '',
			areadec: '',
			business_hours: '',
			business_hours_config: '',
			stylelenth: '',
			contact_phone: '',
			wechat_number: '',
			user_picture: '',
			wechat_qrcode: '',
			motto: '',
			good_at_style: '',
			is_display_contact: 1,
			stylelist: '',
			shop_tag_info: '',
			stylenum: '',
			city_id: '',
			district_id: '',
			province_id: '',
			owner_user_id: '',
			intotype: '',
			service: '',
			showCropperDialog: false, // 显示裁剪图片弹窗
			imgFile: '',
			// course: '0个历程',
			// news: '0个动态',
			// job: '0个招聘',
			brand: '',
			brand_img: '',
			// certificate: '',
			// certificate_img: '',
			// profile_desc: '',
			isShowAddress: false,
			defaultVal: '',
			// dataCity:dataCity,
			upload_type: 'user_picture', // user_picture || wechat_qrcode
			remobile: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[01235678]|18[0-9]|19[89])\d{8}$/,
			defaultArea: [0, 0, 1],
			detail: '',
			renick_name: '',
			showtextearea: true,
			mottoshow: false
		}
	},
	computed: {
		...mapGetters({ userInfo: 'getUser' })
	},
	onLoad(opcation) {
		this.owner_user_id = opcation.owner_user_id
		// this.getcompany()
	},
	onShow() {
		this.init()
		this.getcompany()
	},
	onPageScroll: function(e) {
		if (e.scrollTop > 20) {
			this.mottoshow = true
		} else {
			this.mottoshow = false
		}
	},
	mounted() {
		// this.getcompany()
	},
	methods: {
		init() {
			getUser(true).then(res => {
				let detail = res
				this.detail = detail
				this.user_picture = detail.user_picture
				this.wechat_qrcode = detail.wechat_qrcode
				if (detail.user_picture) {
					this.imgListf[0] = detail.user_picture
				}
				if (detail.wechat_qrcode) {
					this.imgList[0] = detail.wechat_qrcode
				}
				this.nick_name = detail.nick_name
				this.nick_name_short = detail.nick_name_short
				this.working_years = detail.working_years
				if (detail.province_name == detail.city_name) {
					this.address = detail.city_name + detail.district_name
				} else {
					this.address = detail.province_name + detail.city_name + detail.district_name
				}
				this.areadec = detail.address
				this.business_hours = detail.business_hours
				this.business_hours_config = detail.business_hours_config
				this.stylelist = Object.keys(detail.good_at_style).map(i => detail.good_at_style[i]).join('、')
				this.shop_tag_info = Object.keys(detail.shop_tag_info).map(i => detail.shop_tag_info[i].tag_name).join('、')
				this.business_scope_type = Object.keys(detail.business_scope_type).map(i => detail.business_scope_type[i]).join('、')
				this.profile_desc = detail.profile_desc
				this.stylenum = detail.good_at_style.length
				this.contact_phone = detail.contact_phone
				this.wechat_number = detail.wechat_number
				this.motto = detail.motto
				this.team_desc = detail.team_desc
				this.city_id = detail.city_id
				this.district_id = detail.district_id
				this.province_id = detail.province_id
				this.is_display_contact = detail.is_display_contact
				this.service = detail.service
				if (detail.is_display_contact == 1) {
					this.checked = true
				} else {
					this.checked = false
				}
			})
		},
		editaddres() {
			this.$refs.mpvueCityPicker.show()
			this.mottoshow = false
		},
		onConfirm(e) {
			this.address = e.label
			this.province_id = e.code[0]
			this.city_id = e.code[1]
			this.district_id = e.code[2]
			this.nonext = false
			this.seleac = true
			this.mottoshow = true
		},
		// 修改名称操作
		changename() {
			this.$refs.rename.open()
			this.renick_name = this.nick_name
			this.showtextearea = false
		},
		cancelname() {
			this.$refs.rename.close()
			this.showtextearea = true
		},
		confirmname() {
			let data = {
				nick_name: this.renick_name
			}
			relamename(data).then(res => {
				if (res.status == 'success') {
					this.msg(res.data)
					this.$refs.rename.close()
					this.showtextearea = true
					this.init()
				} else {
					this.msg(res.errors.message)
				}
			})
		},
		blursave(savetype, blurType) {
			this.saveperson(savetype, blurType)
		},
		jumpcompany(active, sources) {
			uni.navigateTo({  // 到公司介绍
				url: `/pages/company/infoEdit?active=${active}&owner_user_id=${this.owner_user_id}&hideNav=true`
			})
		},
		jumpintroduce() {
			uni.navigateTo({  // 到公司介绍
				url: `/pages/company/introduce?owner_user_id=${this.owner_user_id}`
			})
		},
		getcompany() {
			let params = {
				company_id: this.owner_user_id
			}
			getusercompany(params).then(res => {
				if (res.status == 'success') {
					let list = res.data
					for (let i in list) {
						if (list[i].config_type == 'course') {
							if (list[i].content.length > 0) {
								this.course = '' + list[i].content.length + '个历程'
							}
						} else if (list[i].config_type == 'certificate') {
							if (list[i].content.length > 0) {
								this.certificate = list[i].content
								this.certificate_img = list[i].content[0].images
							}
						} else if (list[i].config_type == 'news') {
							if (list[i].content.length > 0) {
								this.news = '' + list[i].content.length + '个动态'
							}
						} else if (list[i].config_type == 'job') {
							if (list[i].content.length > 0) {
								this.job = '' + list[i].content.length + '个招聘信息'
							}
						} else if (list[i].config_type == 'brand') {
							this.brand = list[i].content
							this.brand_img = list[i].content[0].images
						}
					}
				} else {
					this.msg(res.errors.message)
				}
			})
		},
		skipstyle(source) {
			if (source == 'style' || source == 'range') {
				uni.navigateTo({  // 风格/经营范围编辑
					url: `/pages/persondata/editStyle?owner_user_id=${this.owner_user_id}&source=${source}`
				})
			} else {
				uni.navigateTo({  // 特色服务编辑
					url: `/pages/persondata/especialLabel?owner_user_id=${this.owner_user_id}&source=${source}`
				})
			}
		},
		changeswitch(e) {  // 开关状态切换选择
			if (e.target.value == true) {
				this.is_display_contact = 1
			} else {
				this.is_display_contact = 0
			}
			// this.saveperson()
		},
		choosetime() {
			uni.navigateTo({  // y营业时间编辑页面
				url: `/pages/persondata/editTime?owner_user_id=${this.owner_user_id}`
			})
		},
		msg(msg) {
			uni.showToast({
				title: msg,
				icon: 'none'
			})
		},
		saveperson(savetype, blurType) {
			let mobiles = this.contact_phone
			let that = this
			let addParams = {}
			if (blurType == 'mobile') {
				if (mobiles.length == 0) {
					that.msg('请输入手机号码')
					return false
				}
				if (mobiles.length !== 11) {
					that.msg('请输入完整的手机号码')
					return false
				}
				if (!that.remobile.test(mobiles)) {
					that.msg('请输入正确手机号')
					return false
				}
				addParams.contact_phone = that.contact_phone
			}
			let params = {
				...addParams,
				nick_name: that.nick_name,
				user_picture: that.$refs.uplod.showImgList[0],
				service: that.service,
				nick_name_short: that.nick_name_short,
				wechat_number: that.wechat_number,
				wechat_qrcode: that.$refs.uplods.showImgList[0],
				working_years: that.working_years,
				team_desc: that.team_desc,
				motto: that.motto,
				profile_desc: that.profile_desc,
				business_hours_config: that.business_hours_config,
				is_display_contact: that.is_display_contact
			}
			if (this.detail.vip_level == 0) {
				params.province_id = that.province_id
				params.city_id = that.city_id
				params.district_id = that.district_id
				params.address = that.areadec
			}
			editpersondata(params).then((res) => {
				if (res.status == 'success') {
					// getBasicUser(this.owner_user_id, true)
					// getUser(true).then(res => {
					// 	this.onLoad()
					// })
					if (savetype == 'blur') {
						console.log('编辑成功')
					} else {
						that.$refs.editAlert.editalert = true
						that.$refs.editAlert.closestatus = 1
						that.showtextearea = false
					}
					that.init()
				} else {
					this.msg(res.errors.message)
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">
	#person{
		font-size: 24px;
		display:flex; 
		justify-content:center;
		.uni-padding-wrap{
			width: 750px;
			height: auto;
			padding: 0;
			display: flex;
			background: white;
			padding-bottom: 100px;
			.line_right{
				background: url($imgUrl+'login/right.png') right center;
				background-repeat: no-repeat;
				background-size: 15px 28px;
			}
			.comdesc{
				width:60%;
				line-height: 20px;
				word-break: break-all;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.newlintab {
				font-size: 24px;
				height: 80px;
				width: calc(100% - 60px);
				float: left;
				color: #969799;
				line-height: 80px;
				background: #F5F5F5;
				padding: 15px 30px;
			}
			.uni-list{
				width: 690px;
				margin: 0 30px;
				.uni-list-cell-pd{
					padding-left: 0;
					padding-right: 0;
				}
			}
			.uni-list::before{
				background: none;
			}
			.uni-form-item {
				width: 690px;
				margin: 0 30px;
				display: block;
				float:left;
				border-bottom: 1px solid #eeeeee;
				.title {
					width: 27%;
					float: left;
					display: inline;
					padding-left: 0;
					line-height: 64px;
				}
				.exbise{
					display: -webkit-box;
					word-break: break-all;
					-webkit-line-clamp: 1;
					/*! autoprefixer: off */
					-webkit-box-orient: vertical;
					/* autoprefixer: on */
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.labtext{
					width: 62%;
					float: left;
					font-size: 24px;
					color: #969799;
					line-height: 64px;
				/*	margin-left: 4%;*/
					line-height: 85px;
				}
				.uploduser{
					float: right;
					border-radius:20px;
				}
				.right_img{
					float:right;
					border-radius:20px;
					width: 152px;
					height: 152px;
					margin-right: 7%;
					display: inline-block;
					position: relative;
					border: 1Px solid rgba(238, 238, 238, 1);
					& > img {
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						left:0;
					}
					.img_btom {
						color: white;
						text-align: center;
						line-height: 40px;
						width: 100%;
						height: 40px;
						position: absolute;
						bottom: 0;
						background: black;
						opacity: .6;
						border-radius: 0 0 20px 20px;
					}
				}
				.uni-input {
					width: 62%;
					float: left;
					color: #969799;
					display: inline;
					margin-top:15px;
				}
				.sellernote{
					float: left;
					width: 64%;
					margin-top: 3%;
					/*margin-top: 2%;*/
					/*margin-left: 4%;*/
					color: #969799;
					height: 100px;
					textarea {
						height: 100px;
						padding: 8px 0 0 0;
					}
				}
				.comsell{
					width: 62%;
					overflow: scroll;
					textarea{
						white-space: pre-wrap;
						width: 100%;
					}
				}
				.spandesc{
					height: 86px;
				}
			}
			.unimotto{
				padding: 0;
			}
		}
		.pub_fotter{
			color: #3a1b04;
			background: #ffd11a;
			height:90px;
			width:100%;
			line-height: 90px;
			// border-radius:10px;
			font-size: 24px;
			margin:auto;
			position:flexed;
			bottom:0px;
			// margin-bottom: 20px;
			.fbtn_left {
				width: 40%;
				float: left;
				color: #666666;
				height: 100%;
				line-height: 90px;
				background: white;
			}
			.fbtn_right {
				width: 60%;
				float: left;
				line-height: 90px;
			}
		}
		.renamemask{
			/*width: 80%;*/
			/*height: 300px;*/
			.maskcontent{
				height: 344px;
				background: white;
				border-radius: 20px;
				position: relative;
				z-index: 9999999;
				.top{
					width: 100%;
					height: auto;
					display: inline-block;
					p{
						font-size: 36px;
						text-align: center;
						margin-top: 60px;
					}
					input{
						height: 90px;
						width: 90%;
						margin-top: 30px;
						line-height: 90px;
						display: inline-block;
						text-align: left;
						padding-left: 10px;
						background:rgba(245,245,245,1);
					}
				}
				.button{
					width: 100%;
					height: 100px;
					display: inline-block;
					margin-top: 23px;
					border-top: 2px solid #dddd;
					border-radius: 0 0 20px 20px;
					.btn{
						width: 49%;
						float: left;
						height: 100px;
						line-height: 100px;
						text-align: center;
						font-size: 36px;
						border-right:1px solid rgba(210,211,213,1);
					}
					.btn:nth-child(2){
						color: #FF6900;
						border-right:none;
					}
				}
			}
		}
	}
	#person /deep/ .uni-popup__wrapper .center .uni-popup__wrapper-box {
		/*left: 5%;
		top: 33%;
		display: unset;*/
		z-index: 99999;
		position: absolute;
	}

	/*
	#person /deep/ .uni-popup__wrapper.top {
		background: white;
	}*/
</style>
